<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Vue.js"></script>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        ul li div img {
            display: block;
            width: 200px;
            height: 120px;
        }

        ul li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid rgb(159, 158, 158);
            padding: 3px 20px;
        }

        ul li button {
            width: 30px;
            height: 25px;
        }

        ul li .text p {
            width: 100px;
          
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 用省略号显示 */
            text-overflow: ellipsis;
        }
    </style>
    </head>

    <body>
        <div class="box">
            <ul>
                <li><div><input type="checkbox" name="" id="">全选/全不选</div></li>
                <template v-for="(i,index) in goodsList" :key="i">
                    <li>
                        <div><input type="checkbox" value=""></div>
                        <div><img :src="i.picture" alt="" srcset=""></div>
                        <div class="text">
                            <p>{{i.name}}</p>
                            <span style="color: red;">￥{{i.price}}</span>
                        </div>
                        <div>
                            <button type="button">-</button>
                            <span>{{i.count}}</span>
                            <button type="button">+</button>
                        </div>
                        <div style="color: red;">￥总价</div>
                        <div>
                            <button>删除</button>
                        </div>
                    </li>
                </template>
                <li><div style="color: red;">￥总金额</div></li>
            </ul>
        </div>
        <script>
            const goodsList = [
                {
                    id: '1',
                    name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
                    price: 289.9,
                    picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
                    count: 2,
                },
                {
                    id: '2',
                    name: '竹制干泡茶盘正方形沥水茶台品茶盘',
                    price: 109.8,
                    picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
                    count: 3,
                    
                },
                {
                    id: '3',
                    name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
                    price: 488,
                    picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
                    count: 1,
                   
                },
                {
                    id: '4',
                    name: '大师监制龙泉青瓷茶叶罐',
                    price: 139,
                    picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
                    count: 1,
                    gift: '50g茶叶,清洗球'
                }
            ]
            const obj = {
                data() {
                    return {
                        goodsList,

                    }
                },
                computed:{
                    spec(){
                       
                    }
                }
            }
            let app = Vue.createApp(obj).mount('.box')





        //     document.querySelector('.list').innerHTML = goodsList.map(i => {
        //         // 解构对象
        //         const { picture, name, spec, price, count, gift } = i
        //         // 让精度不损失
        //         let zprice = (((price * 100) * count) / 100).toFixed(2)
        //         // Object.values(spec) 静态方法转换数组然后在join装换字符串
        //         let specs = Object.values(spec).join('/')
        //         //    console.log(i.gift);
        //         let ta = gift ? gift.split(',').map(i => `<span class="tag">[正品]${i}</span>`).join("") : ''
        //         return `   <div class="item">
        //   <img src="${picture}" alt="">
        //   <p class="name">${name}${ta}</p>
        //   <p class="spec">${specs}</p>
        //   <p class="price">${price.toFixed(2)}</p>
        //   <p class="count">${count}</p>
        //   <p class="sub-total">${zprice}</p>
        // </div> `
        //     }).join("")

        //     let pr = goodsList.reduce((peve, itm) => peve + (itm.price * 100 * itm.count) / 100, 0)
        //     document.querySelector('.amount').innerHTML = pr.toFixed(2)
        </script>
    </body>

</html>